<template>
  <div class="dashboard-container">
    <el-form :inline="true" class="demo-form-inline">
      <!-- 搜索 -->
      <el-row type="flex" justify="space-between">
        <el-form-item label="关键字">
          <el-input
            placeholder="根据编号搜索"
            v-model="searchParams.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clear">清除</el-button>
          <el-button type="primary" size="small" @click="search"
            >搜索</el-button
          >
        </el-form-item>
      </el-row>
      <!-- 数据记录 -->
      <el-row>
        <div class="grid-content bg-purple-dark">
          <i class="el-icon-info"
            ><span>共{{ data.counts }}条数据</span></i
          >
        </div>
      </el-row>
      <!-- 数据列表 -->
      <el-table :data="data.items" style="width: 100%">
        <el-table-column prop="id" label="编号" width="220"></el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="150px"
          :formatter="questionTypes"
        >
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" width="250px">
          <template slot-scope="{ row }">
            <div v-for="item in row.questionIDs" :key="item.index">
              <el-button type="text" @click="questionsPreview(row)">{{
                item.number
              }}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
        ></el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)"
        ></el-table-column>
        <el-table-column prop="userName" label="录入人"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="deletes(row.id)"
              title="删除"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          align="end"
          background
          :page-size="searchParams.pagesize"
          layout=" prev, pager, next, sizes, jumper"
          :total="searchParams.total"
          :page-sizes="[10, 20, 30, 40, 50]"
          :current-page="searchParams.page"
          @current-change="changePage"
          @size-change="changeSize"
        >
        </el-pagination>
      </div>
    </el-form>
    <!-- 试题预览弹出层 -->
    <questions-preview
      :showDialog.sync="showDialog"
      :rows="rows"
      ref="chuanzhi"
    ></questions-preview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import questionsPreview from '../components/questions-preview'
import { questionType } from '../../api/hmmm/constants'
export default {
  components: {
    questionsPreview
  },
  data() {
    return {
      data: [],
      rows: {},
      searchParams: {
        keyword: null,
        page: 1,
        pagesize: 10,
        total: 0
      },
      showDialog: false,
      questionIDs: ''
    }
  },
  created() {
    this.getQuestionList()
  },
  methods: {
    async getQuestionList() {
      const { data } = await randoms(this.searchParams)
      this.data = data
      this.searchParams.total = data.counts
    },
    async search() {
      try {
        const { data } = await randoms(this.searchParams)
        this.data = data
      } catch (error) {
        console.log(error)
      }
    },
    clear() {
      this.searchParams.keyword = ''
      this.search()
    },
    async deletes(id) {
      await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await removeRandoms({ id })
        this.$message.success('删除成功')
        this.getQuestionList()
      } catch (error) {
        console.log(error)
      }
    },
    changePage(newPage) {
      this.searchParams.page = newPage
      this.getQuestionList(this.searchParams)
    },
    changeSize(newSize) {
      this.searchParams.page = 1
      this.searchParams.pagesize = newSize
      this.getQuestionList()
    },
    questionTypes(row, column, cellValue, index) {
      const obj = questionType.find(item => item.value == cellValue)
      return obj ? obj.label : '未知'
    },
    questionsPreview(row) {
      // console.log(row.questionIDs)
      this.$refs.chuanzhi.close(row)
      this.showDialog = true
      // this.rows = row
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard-container {
  background-color: #fff;
  padding: 25px 25px;
  margin: 13px 10px;
  .grid-content {
    border-radius: 4px;
    height: 36px;
    line-height: 36px;
    padding-left: 15px;
    margin-bottom: 15px;
  }
  .bg-purple-dark {
    background: #f4f4f5;
  }
  .el-icon-info {
    color: #909399;
    span {
      font-size: 13px;
      padding-left: 10px;
    }
  }
  .el-input--medium {
    width: 300px;
    height: 32px;
  }
  .el-button--danger {
    background-color: #fef0f0;
    color: #f57b78;
    border-color: #fbc4c4;
    &:hover {
      background-color: #f56c6c;
      border-color: #f56c6c;
      color: #fff;
    }
  }
  .block {
    margin-top: 25px;
  }
}
</style>
